<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<style>

    .email-value {
        overflow: hidden;
        text-align: center;
        height: 15px;
        width: 15px;
        font-size: 12px;
        /*

                border-left: 1px solid #000;
                border-right: 1px solid #000;
        */

        background-color: white;

        display: inline-block;

        margin-right: 2px;
        margin-left: 2px;
    }

    .focus {
        background-color: #c7f3ff;
    }

</style>


<div style="padding-top: 50px;padding-bottom:50px;background-color: #98d3d8;margin: 20px;font: 62.5%/1 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif;

">


    <h2 style="text-align: center;font-size: 20px;    -webkit-line-clamp: 1">补全邮箱重新获取订单激活邮件</h2>
    <div style="margin-top: 10%;display: block; overflow: hidden; flex: 0 0 auto; -webkit-box-align: center;">

        <span style="text-align:center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">
<input class="email-hide-input" type="text"
       style="background-color:#98d3d8;display: block;width: 0;height: 0;border: 0;">
            <div class="input-container">
        <span style="text-align:center;font-size: 15px;height: 20px">

            <div style="display: inline-block;height: 20px">
                ${preShow}
            </div>

            <div class="email-hide-box" style="display: inline-block;height: 20px">


            </div>

            <div style="display: inline-block;height: 20px">
                ${sub}
            </div>
        </span>
            </div>
        </span>
    </div>

</div>


<script>

    top.setTitle("重发激活邮件");

    for (let i = 0; i < ${hNum}; i++) {

        $('.email-hide-box').append('<div type="text" class="email-value"></div>');

    }


    let s;

    function init() {

        $('.email-hide-input').focus();
        $('.email-value').text('');
        $('.email-value:first').addClass('focus');

        s = '';

    }

    $('.input-container').click(function () {
        init();
    });

    init();

    let regex = /^[A-Za-z0-9]$/;

    $(".email-hide-input").bind('input keydown', function (e) {

        if (e.type === "keydown") {

            if (e.keyCode === 8) {
                //如果是删除事件

                let focus = $('.focus');


                let prev = focus.prev();


                if (prev.length !== 0) {

                    s = s.substr(0, s.length - 1);

                    prev.text('');

                    //当前元素失去焦点
                    focus.removeClass('focus');

                    //令前一个元素获得焦点
                    prev.addClass('focus');
                }

            }

        } else {

            //如果是输入事件

            let input = $(this);

            let v = input.val();

            //每次输入都清空输入框中的值
            input.val('');

            if (regex.test(v)) {

                //追加输入框的值到s
                s += v;

                //获取当前焦点的下一个
                let focus = $('.focus');

                //将输入框中的值付给当前焦点
                focus.text(v);

                //首相令当前焦点失去焦点
                focus.removeClass('focus');

                let next = focus.next();
                if (next.length === 0) {//如果已经到最后一个

                    //输入框失去焦点
                    input.blur();

                    complete(s);

                } else {//否则
                    //给下一个框添加焦点
                    next.addClass('focus');
                }
            }
        }

    });


    function complete(v) {


        //发起请求
        let e = '${preShow}' + v + '${sub}';

        $.post('/order/landlord/resent-unlock-email', {email: e, orderId: '${orderId}'}, function () {
            alert('已发送');
            window.close();
        }).error(function (r) {
            init();
            alert(r.responseText);

        });

    }


</script>
